<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>拼车系统</title>
    <link rel="stylesheet" href="<?php echo base_url('bootstrap/css/bootstrap.css'); ?>">
    <link rel="stylesheet" href="<?php echo base_url('bootstrap/css/bootstrap-theme.css'); ?>">
    <link rel="stylesheet" href="<?php echo base_url('css/style.css') ?>">
    <script src="<?php echo base_url('js/jquery-2.1.1.js'); ?>"></script>
    <script src="<?php echo base_url('bootstrap/js/bootstrap.js'); ?>"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand navbar-i" href="<?php echo site_url('/info') ?>">
                <img src="<?php echo base_url('image/logo.png'); ?>">
            </a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav nav-pills nav-self">
                <li class="active"><a href="<?php echo site_url('user/signup'); ?>">注册</a></li>
                <li><a href="<?php echo site_url('user/signin'); ?>">登录</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="account-form">
    <h1>注册</h1>
    <?php echo validation_errors('<div class="alert alert-danger" role="alert">', '</div>'); ?>
    <form role="form" id="signup" action="<?php echo site_url('user/signup'); ?>" method="post">
        <div class="form-group" id="div-username">
            <label class="control-label sr-only" for="username">用户名</label>
            <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
        </div>
        <div class="form-group" id="div-password">
            <label class="control-label sr-only" for="password">密码</label>
            <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
        </div>
        <div class="form-group" id="div-password1">
            <label class="control-label sr-only" for="password1">确认密码</label>
            <input type="password" class="form-control" id="password1" name="password1" placeholder="请重新输入密码">
        </div>
        <div class="form-group" id="div-phone">
            <label class="control-label sr-only" for="phone">联系电话</label>
            <input type="tel" class="form-control" id="phone" name="phone" placeholder="请输入联系电话">
        </div>
        <div class="form-group" id="div-captcha">
            <label class="control-label sr-only" for="captcha">验证码</label>
            <input type="text" class="form-control" id="captcha" name="captcha" placeholder="请输入验证码">
            <span id="captcha-img">
                <img src="<?php echo site_url('user/get_captcha') ?>" onclick="javascript:this.src='<?php echo site_url('user/get_captcha') ?>'+'?'+Math.random();">
            </span>
        </div>
        <hr>
        <div class="form-group">
            <input type="submit" class="form-control btn btn-primary" value="注册">
        </div>
    </form>
</div>
<script>
    var flaguser=false;
    var flagpwd=false;
    var flagpwd1=false;
    var flagphone=false;
    var flagcap=false;
    $(function() {
        $('#username').blur(function(){
            var name=$(this).val();
            username_check(name);
        });
        $('#password').keyup(function(){
            var pwd=$(this).val();
            var t=$('#div-password');
            if(pwd.length<6)
            {
                flagpwd=false;
                t.addClass('has-error');
                t.removeClass('has-success');
            }
            else
            {
                flagpwd=true;
                t.addClass('has-success');
                t.removeClass('has-error');
            }
        });
        $('#password1').keyup(function(){
            var pwd1=$(this).val();
            var pwd=$('#password').val();
            var t=$('#div-password1');
            if(pwd1!=pwd)
            {
                flagpwd1=false;
                t.addClass('has-error');
                t.removeClass('has-success');
            }
            else
            {
                flagpwd1=true;
                t.addClass('has-success');
                t.removeClass('has-error');
            }
        });
        $('#phone').keyup(function(){
            var phone=$(this).val();
            var t=$('#div-phone');
            if(/^[0-9]{11}$/.test(phone))
            {
                flagphone=true;
                t.addClass('has-success');
                t.removeClass('has-error');
            }
            else
            {
                flagphone=false;
                t.addClass('has-error');
                t.removeClass('has-success');
            }
        });
        $('#captcha').keyup(function(){
            var c=$(this).val();
            captcha_check(c);
        });
        $('#signup').submit(function(){
            var f=flagcap&&flagphone&&flagpwd&&flagpwd1&&flaguser;
            if(!f)
            {
                return false;
            }
        });
    });

    function username_check(name) {
        var flag=false;
        var t=$('#div-username');
        if(/^[^\w\s]{3,15}$|^[a-zA-Z]{1}\S{3,14}$/.test(name))
        {
            flag=true;
        }
        else
        {
            flag=false;
            flaguser=false;
            t.addClass('has-error');
            t.removeClass('has-success');
            return;
        }
        $.ajax({
            cache: true,
            type: 'post',
            url: '<?php echo site_url('user/user_check'); ?>',
            data: 'username='+name,
            error: function(){
                flaguser=false;
                t.addClass('has-error');
                t.removeClass('has-success');
            },
            success: function(data){
                if(data=='1'&&flag)
                {
                    flaguser=true;
                    t.addClass('has-success');
                    t.removeClass('has-error');
                }
                else
                {
                    flaguser=false;
                    t.addClass('has-error');
                    t.removeClass('has-success');
                }
            }
        });
    }

    function captcha_check(c) {
        var t=$('#div-captcha');
        if(!/^\w{4}$/.test(c))
        {
            flagcap=false;
            t.addClass('has-error');
            t.removeClass('has-success');
            return;
        }
        $.ajax({
            cache: true,
            type: 'post',
            url: '<?php echo site_url('user/captcha_check'); ?>',
            data: 'captcha='+c,
            error: function(){
                flagcap=false;
                t.addClass('has-error');
                t.removeClass('has-success');
            },
            success: function(data){
                if(data=='1')
                {
                    flagcap=true;
                    t.addClass('has-success');
                    t.removeClass('has-error');
                }
                else
                {
                    flagcap=false;
                    t.addClass('has-error');
                    t.removeClass('has-success');
                }
            }
        });
    }
</script>
</body>
</html>